<template>
    <div class="login">
        <h3 class="login-title">
            人事管理系统
        </h3>
        <el-form ref="login_form" label-width="80px" class="login-form" :rules="loginrule" :model="loginform">
            <el-form-item label="用户名:" prop="username">
                <el-input v-model="loginform.username"></el-input>
            </el-form-item>
            <el-form-item label="密　码:" prop="password">
                <el-input type="password" v-model="loginform.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="success">登　录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<style lang="scss">
body {
    background: url('./assets/image/bg_1.jpg') no-repeat top center;
    background-size: cover;
}

.login {
    width: 400px;
    height: 280px;
    position: relative;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -140px;
    border-radius: 5px;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#00FFFFFF', endColorstr='#00FFFFFF');
    background-color: rgba(255, 255, 255, .2);
    .login-title {
        font-size: 20px;
        color: #fff;
        text-align: center;
        padding: 20px 0;
    }
    .login-form {
        padding-right: 30px;
        padding-left: 25px;
        .el-form-item__label {
            font-size: 16px;
            color: #fff;
            padding-top: 9px;
        }
        .el-input {
            width: 90%;
        }
        .el-button {
            width: 100px;
            font-size: 18px;
            float: right;
            margin-right: 25px;
        }
    }
}
</style>

<script>
import './data/login/logindata'
export default {
    name: 'login',
    data() {
        var checkNull = (rule, value, callback) => {
            console.log(rule);
            if(!value){
                return callback(new Error('请输入用户名称'));
            }else{
                callback();
            }
        };
        return {
            loginform: {
                username: '',
                password: '',
            },
            loginrule: {
                username: [{ validator: checkNull, trigger: 'change',message:'请输入用户名！' }],
                password:[{validator:checkNull,trigger:'change',message:'请输入密码！'}]

            }
        }
    },
    methods: {
        login() {
            this.$refs['login_form'].validate((valid)=>{
                if(valid){
                    
                }
            })
            // this.axios.get(this.api.LoginApi.login)
            //     .then((response) => {
            //         console.log(response);
            //     })
            //     .catch((er) => {

            //     })
        }
    },
    mounted() {

    }
}
</script>
